import React, { useEffect, useRef, useState } from 'react';
import { Container, Grid } from '@mui/material';

const VideoPath = '/assets/videos/Wave.mp4';

const WaveSection = () => {
  const videoRef = useRef(null);
  const canvasRef = useRef(null);
  const [containerHeight, setContainerHeight] = useState('100vh');
  const [textColor, setTextColor] = useState([]);

  useEffect(() => {
    const video = videoRef.current;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    // 当视频元数据加载完成后的部分代码
    video.addEventListener('loadedmetadata', () => {
      const videoWidth = video.videoWidth;
      const videoHeight = video.videoHeight;
      const ratio = videoHeight / videoWidth;
      const containerWidth = video.clientWidth;
      const calculatedHeight = containerWidth * ratio;

      // 确保canvas和video的大小相同
      canvas.width = containerWidth;
      canvas.height = calculatedHeight;

      setContainerHeight(`${calculatedHeight}px`); // 动态设置容器高度
    });

    video.muted = true;

    // 每一帧都将视频帧画到Canvas上的部分代码
    // 每一帧都将视频帧画到Canvas上的部分代码
    // 每一帧都将视频帧画到Canvas上的部分代码
    const drawFrame = () => {
      // 先绘制视频
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      // 文字内容和样式设置
      const textContent = '人工智能';
      const fontSize = 72;
      const startX = 200; // 更新文字开始的X位置
      const startY = 200; // 更新文字开始的Y位置

      ctx.font = `${fontSize}px Arial`;
      ctx.textAlign = 'left';

      // 获取文字的宽度
      const textWidth = ctx.measureText(textContent).width;

      // 创建一个临时画布来渲染文字
      const textCanvas = document.createElement('canvas');
      textCanvas.width = textWidth;
      textCanvas.height = fontSize;
      const textCtx = textCanvas.getContext('2d');

      textCtx.font = `${fontSize}px Arial`;
      textCtx.textAlign = 'left';
      textCtx.fillText(textContent, 0, fontSize); // 在临时画布上渲染文字

      // 从临时画布获取文字的像素数据
      const textImageData = textCtx.getImageData(0, 0, textCanvas.width, textCanvas.height);

      // 仅遍历文字区域的像素
      for (let y = 0; y < fontSize; y += 1) {
        for (let x = 0; x < textWidth; x += 1) {
          const textPixelIndex = (y * textCanvas.width + x) * 4;
          const textPixelData = textImageData.data.slice(textPixelIndex, textPixelIndex + 4);

          if (textPixelData[3] > 0) {
            // 如果该像素属于文字
            const videoPixelData = ctx.getImageData(startX + x, startY + y, 1, 1).data;
            const r = videoPixelData[0];
            const g = videoPixelData[1];
            const b = videoPixelData[2];

            ctx.fillStyle = `rgb(${255 - r}, ${255 - g}, ${255 - b})`;
            ctx.fillRect(startX + x, startY + y, 1, 1);
          }
        }
      }

      requestAnimationFrame(drawFrame); // 请求下一帧
    };

    drawFrame();
  }, []);
  return (
    <Container
      sx={{
        height: containerHeight,
        position: 'relative',
        overflow: 'hidden'
      }}
    >
      <video
        ref={videoRef}
        autoPlay
        loop
        muted
        style={{
          width: '100%',
          position: 'absolute',
          zIndex: 1,
          objectFit: 'cover'
        }}
      >
        <source src={VideoPath} type="video/mp4" />
        您的浏览器不支持视频标签。
      </video>
      <canvas
        ref={canvasRef}
        style={{
          display: 'block',
          position: 'absolute', // 画布设为绝对定位
          zIndex: 2 // 画布的z-index设为2，确保在视频之上
        }}
        width="640"
        height="360"
      />
    </Container>
  );
};

export default WaveSection;
